Responsive SVG Slider
This isn't a typical slider or carousel. This design has a static image in the foreground, while the only background images are animated (slide). It still uses JavaScript though.
Static Foreground Image
Background Sliding Image
CSS is used for the background gradient (sky and earth) for each slide, minimizing file size.
Slide One
Slide Two
Slide Three
SVG images are fully scaleable and responsive. The file size is about 130kb for each image.
The slider can be seen it in action at: https://www.frontlightweb.com/slider.html
